<template>
    <view class="container paddingBottomBar" v-if="list && list.length > 0" :style="themeColor">
        <header-bar :config="config"></header-bar>
        <view class="header-bg"></view>
        <view class="main">
            <view class="delivery-mode">
                <view class="delivery-mode-main" @click="goSelectAddress">
                    <view class="address-title">配送地址</view>
                    <view class="info" v-if="getUseAddress">
                        <view class="info-name">
                            <image class="icon-lbs" src="/static/icon/icon_search_bar_lbs.png"></image>
                            <text>{{ getUseAddress.ContactName }} {{ getUseAddress.ContactTel }}</text>
                        </view>
                        <view class="location">
                            <text class="location-text">{{ getUseAddress.ProvinceName ? getUseAddress.ProvinceName : ""
                                }}{{ getUseAddress.CityName ? getUseAddress.CityName : ""
                                }}{{ getUseAddress.AreaName ? getUseAddress.AreaName : ""
                                }}{{ getUseAddress.StreetName ? getUseAddress.StreetName : ""
                                }}{{ getUseAddress.ContactAddress ? getUseAddress.ContactAddress : "" }}</text>
                            <uni-icons type="arrowright"></uni-icons>
                        </view>
                    </view>
                    <view class="info" v-else>
                        <view class="add-location">
                            <text class="location-text">+点击选择地址</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="" v-for="(data, inde) in list" :key="inde">
                <view class="order-item product-item">
                    <view class="flex-v-c supplier-box item-box" @click="goSupplierPage(data.SupplierId)">
                        <text class="iconfont icon-dianpu"></text>
                        <text class="supplier-name">{{ data.SupplierName || "总部" }}</text>
                        <text class="iconfont icon-xiayiji"></text>
                    </view>
                    <view class="order-item-main item-box" v-if="data.productList" @click="openList(data.productList)">
                        <view class="order-item-imgs">
                            <view class="img-item" v-for="(item, index) in data.productList" :key="index"
                                v-if="index < 3">
                                <image mode="aspectFill" :src="easyGetImgUrl(item.V_ThumbnailUrl160)"
                                    class="order-item-img"></image>
                                <view class="order-item-name" v-if="data.productList.length == 1">{{
                                    item.V_Title
                                }}</view>
                            </view>
                            <uni-icons type="more" v-if="data.productList.length > 3"></uni-icons>
                        </view>
                        <view class="right-box">
                            <view class="num-box">
                                <text class="order-desc">共{{ data.productList.length }}种</text>
                                <text v-show="false" class="order-desc">数量{{ data.num }}</text>
                            </view>
                            <uni-icons type="arrowright" size="20" customIcons="icon-black"></uni-icons>
                        </view>
                    </view>
                    <view class="item-box">
                        <order-submit-price v-if="data.productPrice" :data="data"></order-submit-price>
                    </view>
                    <view class="item-box">
                        <text>买家留言(选填）</text>
                        <textarea v-model="data.Remark" class="msg-input" placeholder="请在此处填写留言..."></textarea>
                    </view>
                </view>
            </view>
            <order-bottom-bar v-if="!isLoading && bottomData" :list="list" :ids="ids" :isTempCar="isTempCar"
                :orderType="orderType" :useAddress="getUseAddress" :total="bottomData"></order-bottom-bar>
        </view>

        <uni-popup ref="policyPop" type="right" class="popupright" :safe-area="false">
            <view class="pop-pro-list" :style="'height:' +
                (systemInfo.windowHeight - navStatusBarHeight) +
                'px;margin-top:' +
                navStatusBarHeight +
                'px'
                ">
                <view class="pop-header">
                    <text class="text">商品清单</text>
                    <uni-icons class="icon-close" size="40" type="arrowleft" @click="$refs.policyPop.close()">
                    </uni-icons>
                </view>
                <scroll-view scroll-y class="scroll">
                    <view class="order-submit-list">
                        <order-submit-item v-for="(item, index) in productList" :key="index" :item="item">
                        </order-submit-item>
                    </view>
                </scroll-view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { mapMutations, mapGetters } from "vuex"
import orderBottomBar from "@/pages_supplier/components/order/order-bottom-bar.vue"
import orderSubmitItem from "@/pages_supplier/components/order/order-submit-item.vue"
import orderSubmitPrice from "@/pages_supplier/components/order/order-submit-price.vue"
import { GetOrderPostage } from "@/service/api/order.js"

import { getReceivingAddressList, getUserCarList, getUserTempCarList } from "@/service/api/member.js"
import { getList } from "@/service/api/businessPay.js"
import storage from "@/uni-sub-base/utils/storage.js"
export default {
    components: {
        orderBottomBar,
        orderSubmitPrice,
        orderSubmitItem,
    },
    data() {
        return {
            config: {
                title: "提交订单",
                back: true,
                color: ["#ffffff"],
                centerSlot: true,
                barPlaceholder: true,
            },
            ids: "", //购物车ids
            list: [], //数据列表
            productList: [], //商品弹窗列表
            isTempCar: false, //临时购物车
            orderType: "", //订单类型
            param: {},
            isLoading: false,
            systemInfo: {},
            navStatusBarHeight: null,
            bottomData: {}, //底部汇总数据
        }
    },
    onLoad(e) {
        this.ids = e.ids
        this.orderType = e.orderType
        this.isTempCar = e.isTempCar == 1 ? true : false
    },
    watch: {
        //监听购物车数据
        getCartData(e) {
            //获取总数
            this.easyUpSupplierTabBarBadge()
        },
        getUseAddress(e) {
            this.getPostage()
        },
        //监听更新
        getUpRemarkView(e) {
            this.getData()
        },
    },
    computed: {
        ...mapGetters(["getUseAddress", "getUpRemarkView"]),
    },
    created() {
        this.config.backgroundColor = [1, this.getThemeColor]
    },
    mounted() {
        let userId = storage.getCache("userInfo").UserId
        this.param = {
            ids: this.ids,
            priceType: 1,
            isTempCar: this.isTempCar,
            groupType: 2,
        }
        this.getData()
        let systemInfo = uni.getSystemInfoSync()
        this.systemInfo = systemInfo
        //状态栏高度
        let statusBarHeight = Number(systemInfo.statusBarHeight)
        let menu = uni.getMenuButtonBoundingClientRect()
        //导航栏高度
        let navBarHeight = menu.height + (menu.top - statusBarHeight) * 2
        //状态栏加导航栏高度
        this.navStatusBarHeight = statusBarHeight + menu.height + (menu.top - statusBarHeight) * 2
    },
    methods: {
        ...mapMutations(["SET_USE_ADDRESS"]),
        // 获取商品
        getData() {
            this.isLoading = true
            getUserCarList(this.param).then((res) => {
                this.list = []
                if (res && res.Data && res.Data.length > 0) {
                    res.Data.forEach((e) => {
                        let filterItem = this.list.filter((item) => {
                            return item.SupplierId == e.SupplierId
                        })
                        if (filterItem.length < 1) {
                            let productList = []
                            productList.push(e)
                            let obj = {
                                SupplierId: e.SupplierId,
                                SupplierName: e.SupplierName,
                                productList: productList,
                            }
                            this.list.push(obj)
                        } else {
                            filterItem[0].productList.push(e)
                        }
                    })
                    this.getTotalNum()
                    this.getAddress()
                }
                this.isLoading = false
            })
        },
        //获取收货地址
        getAddress() {
            let param = {
                searchKey: "",
            }
            getReceivingAddressList(param).then((res) => {
                if (res.Data && res.Data.length > 0) {
                    let hasDefalut = false
                    res.Data.forEach((e) => {
                        if (e.IsDefault) {
                            hasDefalut = true
                            this.SET_USE_ADDRESS(e)
                        }
                    })
                    if (!hasDefalut) {
                        this.SET_USE_ADDRESS(res.Data[0])
                    }
                } else {
                    //还没有设置地址
                    this.SET_USE_ADDRESS(null)
                }
            })
        },
        // 获取运费
        getPostage() {
            if (this.list && this.list.length > 0 && this.getUseAddress) {
                let param = {
                    carIds: this.ids ? this.ids : "",
                    provinceId: this.getUseAddress.ProvinceId,
                    cityId: this.getUseAddress.CityId,
                    areaId: this.getUseAddress.AreaId,
                    isTempCar: this.isTempCar,
                    groupType: 2,
                }
                GetOrderPostage(param).then((res) => {
                    if (res.State && res.Data && res.Data.length > 0) {
                        this.list.forEach((e) => {
                            res.Data.forEach((item) => {
                                if (item.GroupId == e.SupplierId) {
                                    e.postPrice = item.PostageMoney
                                    e.postDesc = item.TemplateData
                                }
                            })
                        })
                        this.getTotalNum()
                    }
                })
            }
        },
        // 打开商品列表弹窗
        openList(list) {
            this.productList = list
            this.$forceUpdate()
            this.$refs.policyPop.open()
        },
        goSupplierPage(id) {
            if (id) {
                this.easyGoTo("/pages_supplier/packet/supplier/detail?id=" + id)
            }
        },
        // 汇总数据
        getTotalNum() {
            let totalSpace = 0,
                totalNum = 0,
                totalPrice = 0
            this.list.forEach((e) => {
                e.space = 0
                e.num = 0
                e.productPrice = 0
                if (e.productList) {
                    e.productList.forEach((item) => {
                        e.space += 1
                        totalSpace += 1
                        totalNum += item.Amount
                        e.num += item.Amount
                        e.productPrice += item.V_FactPrice * item.Amount
                    })
                }
                e.postPrice = Number(e.postPrice) || 0
                totalPrice = Number(totalPrice) + Number(e.postPrice) + Number(e.productPrice)

                totalPrice = totalPrice.toFixed(2)
            })
            this.bottomData = {
                totalSpace,
                totalNum,
                totalPrice,
            }
            this.$forceUpdate()
        },
        // 选择地址
        goSelectAddress() {
            let path = this.getUseAddress ? this.getUseAddress.ID : 0
            this.easyGoTo("/pages_me/packet/address/index?from=select&selectId=" + path)
        },
    },
}
</script>

<style lang="scss">
.order-item {
    background: $color-white;
    margin-bottom: 20rpx;
}

.product-item {
    padding: $app-page-padding;
    border-radius: 16rpx;

    .title-text {
        display: flex;
        font-weight: 700;
        padding-bottom: 24rpx;
        border-bottom: 1rpx solid #ebebeb;
        margin-bottom: 24rpx;
        font-size: 28rpx;
    }
}

.container {
    padding-top: $app-page-padding;

    .delivery-mode {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-bottom: 20rpx;

        .delivery-mode-header {
            display: flex;
            flex-direction: row;
            height: 90rpx;
            border-bottom: solid 1rpx $color-gray-4;
            padding: 0 $app-page-padding;
            align-items: center;

            .radio-box {
                display: flex;
                flex: 1;
                flex-direction: row;
                justify-content: flex-end;

                .radio-item {
                    height: 90rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-left: 10rpx;
                }

                .current {
                    position: relative;

                    &:after {
                        content: "";
                        position: absolute;
                        bottom: 0rpx;
                        left: 50%;
                        border-width: 0 14rpx 14rpx;
                        border-style: solid;
                        border-color: transparent transparent $color-gray-4;
                    }
                }
            }
        }

        .delivery-mode-main {
            padding: $app-page-padding;
            border-radius: 16rpx;
            background: $color-white;

            .address-title {
                font-size: 28rpx;
                font-weight: bold;
                margin-bottom: 34rpx;
            }

            .info {
                display: flex;
                flex: 1;
                flex-direction: column;
                justify-content: center;

                .info-name {
                    margin-bottom: 24rpx;
                    display: flex;
                    flex-direction: row;
                    align-items: center;

                    .icon-lbs {
                        width: 32rpx;
                        height: 32rpx;
                        margin-right: 14rpx;
                    }

                    text {
                        font-size: $font-size-28;
                        color: $color-black;
                        font-weight: 700;
                    }

                    .info-name-label {
                        color: $app-color-text-tip;
                    }
                }

                .location {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    margin-bottom: 10rpx;

                    .location-text {
                        align-items: center;
                        display: flex;
                        flex: 1;
                        color: $app-color-text-desc;
                        line-height: 38rpx;
                        margin-right: 20rpx;
                        font-size: $font-size-24;
                        margin-bottom: 0;
                    }
                }

                .add-location {
                    margin: 12rpx 64rpx;
                    display: flex;
                    height: 72rpx;
                    align-items: center;
                    justify-content: center;
                    border: 4rpx dashed #dbdcdb;

                    text {
                        color: $app-color-text-desc;
                        font-size: $font-size-28;
                    }
                }
            }
        }
    }
}

.tab {
    display: flex;
    flex-direction: row;
    height: 76rpx;
    position: relative;

    .tab-item {
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;

        text {
            color: #4d4d4d;
        }

        position: relative;
        z-index: 1;
    }

    .bg {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 70rpx;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 16rpx 16rpx 0 0;
    }

    .current {
        text {
            height: 76rpx;
            display: flex;
            align-items: center;
            width: 100%;
            justify-content: center;
            background: $color-white;
            border-radius: 16rpx 16rpx 0 0;
            color: $app-color-main;
            font-weight: 700;
            font-size: $font-size-32;
            position: relative;
            z-index: 0;
        }
    }

    .tab-bg-left {
        width: 56rpx;
        height: 76rpx;
        position: absolute;
        right: -32rpx;
        bottom: 0;
        z-index: 10;
    }

    .tab-bg-right {
        width: 58rpx;
        height: 76rpx;
        position: absolute;
        left: -32rpx;
        bottom: 0;
    }
}

.tab-mark {
    height: 16rpx;
    border-radius: 16rpx 16rpx 0 0;
    background: $color-white;
}

.header-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300rpx;
    background: linear-gradient(180deg, $app-color-main 0%, rgba(0, 140, 59, 0) 100%);
    z-index: 0;
}

.main {
    position: relative;
    padding-left: $app-page-padding;
    padding-right: $app-page-padding;
    z-index: 1;
}

.order-item-main {
    display: flex;
    flex: 1;
    flex-direction: row;
}

.order-item-imgs {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;

    .img-item {
        position: relative;
        margin-right: 24rpx;
        display: flex;
        align-items: center;

        .order-item-name {
            font-size: 28rpx;
            color: $color-gray-1;
            display: flex;
            flex: 1;
            align-items: center;
            padding-left: 14rpx;
        }

        .order-item-img {
            display: flex;
            width: 120rpx;
            height: 120rpx;
            // border: 1px solid $app-color-main;
            border-radius: 8rpx;
        }

        .text-num {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40rpx;
            border-bottom-left-radius: 10rpx;
            border-bottom-right-radius: 10rpx;
            color: $color-white;
            background: rgba($color-black, 0.3);
            font-size: $font-size-24;
        }
    }
}

.right-box {
    display: flex;
    flex-direction: row;
    align-items: center;

    .num-box {
        display: flex;
        flex-direction: column;
        margin-right: 16rpx;

        text {
            margin-bottom: 4rpx;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

.pop-pro-list {
    background: #f1f1f1;

    .pop-header {
        display: flex;
        flex-direction: row;
        height: 88rpx;
        align-items: center;
        justify-content: center;
        border-radius: 24rpx 24rpx 0 0;
        border-bottom: solid 12rpx #f1f1f1;
        background: #ffffff;

        .icon-close {
            position: absolute;
            right: 24rpx;
            color: $color-gray-3;
        }

        .text {
            font-size: $font-size-28;
            font-weight: 700;
        }
    }

    .scroll {
        height: calc(100vh - 220rpx);
    }
}

.popupright {
    .icon-close {
        right: auto !important;
        left: 24rpx;
        color: $color-gray-3;
    }
}

.coupon-item {
    display: flex;
    flex-direction: column;
    border-radius: 16rpx;

    .coupon-item-main {
        display: flex;
        flex-direction: row;
        align-items: center;

        .icon-coupon {
            width: 32rpx;
            height: 32rpx;
            margin-right: 12rpx;
        }

        .icon-coupon-name {
            flex: 1;
        }

        .no-use-coupon {
            color: $app-color-text-tip;
            font-size: $font-size-24;
        }

        .use-coupon {
            color: $color-orange-1;
            font-size: $font-size-24;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 60%;
        }

        .icon-right {
            margin-left: 8rpx;
        }
    }

    .coupon-item-desc {
        text {
            color: $app-color-text-tip;
            font-size: $font-size-24;
        }
    }
}

.supplier-box {
    font-weight: 700;

    .icon-dianpu {
        font-size: 32rpx;
        margin-right: 10rpx;
    }

    .supplier-name {
        font-size: 30rpx;
    }
}

.item-box {
    // padding: $app-page-padding;
    // display: flex;
    // flex-direction: column;
    padding-bottom: 24rpx;
    margin-bottom: 24rpx;
    border-bottom: 1rpx solid #ebebeb;

    &:last-child {
        border-bottom: none;
        margin-bottom: 0rpx;
        padding-bottom: 0rpx;
    }

    // border-radius: 16rpx;

    .msg-input {
        display: flex;
        margin-top: $app-page-padding;
        display: flex;
        height: 150rpx;
        background: #f7f7f7;
        border-radius: $border-radius-10;
        padding: 10rpx;
        width: calc(100% - 20rpx);
    }
}

.order-submit-list {
    background-color: $color-white;
    border-radius: $border-radius-10;
    // margin-bottom: 20rpx;
    padding: $app-page-padding $app-page-padding 0 $app-page-padding;
}
</style>
